<template>
  <div class="search_box">
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="文章标题">
        <el-input placeholder="请输入文章标题" />
      </el-form-item>
      <el-form-item label="文章分类">
        <el-cascader :options="cascader" clearable />
      </el-form-item>
      <el-form-item label="文章状态">
        <el-select
          v-model="articleStatus.value"
          class="m-2"
          placeholder="请选择"
          clearable
        >
          <el-option
            v-for="items in articleStatus.option"
            :key="items.value"
            :label="items.label"
            :value="items.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          v-for="(btn, index) in buttonModel"
          :key="index"
          @click="navButton(btn.text)"
        >
          <svg class="icon" aria-hidden="true">
            <use :xlink:href="btn.icon"></use>
          </svg>
          {{ btn.text }}
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref, watch } from "vue";
import type { FormInstance } from "element-plus";
const emits = defineEmits(["closeEdit"]);
const articleStatus = ref({
  value: "",
  option: [
    {
      value: "已上线",
      label: "已上线",
    },
    {
      value: "已下线",
      label: "已下线",
    },
    {
      value: "已删除",
      label: "已删除",
    },
  ],
});
const cascader = ref([
  {
    value: "guide",
    label: "Guide",
    children: [
      {
        value: "disciplines",
        label: "Disciplines",
        children: [
          {
            value: "consistency",
            label: "Consistency",
          },
          {
            value: "feedback",
            label: "Feedback",
          },
          {
            value: "efficiency",
            label: "Efficiency",
          },
          {
            value: "controllability",
            label: "Controllability",
          },
        ],
      },
      {
        value: "navigation",
        label: "Navigation",
        children: [
          {
            value: "side nav",
            label: "Side Navigation",
          },
          {
            value: "top nav",
            label: "Top Navigation",
          },
        ],
      },
    ],
  },
]);
const buttonModel = reactive([
  {
    icon: "#icon-sousuo3",
    text: "查询",
  },
  {
    icon: "#icon-a-6gengxin",
    text: "重置",
  },
  {
    icon: "#icon-plus_x",
    text: "新增文章",
  },
]);
const navButton = (t: string) => {
  const condition: any = new Map([
    ["查询", () => {}],
    ["重置", () => {}],
    [
      "新增文章",
      () => {
        emits("closeEdit", true);
      },
    ],
  ]);
  condition.get(t)();
};
const formRef = ref<FormInstance>();
</script>
<style lang="scss" scoped>
@import "@/static/css/common.scss";

svg {
  width: 14px;
  height: 14px;
  fill: #fff;
  margin-right: 4px;
}

.inner_icon {
  fill: #4d70ff;
  margin-right: 2px;
}

.inner_icon:hover {
  fill: #2d56fa;
}

.new-article-btn {
  margin-left: 15px !important;
}

.dialog-footer {
  button:last-child {
    margin-left: 20px;
  }
}
</style>
